<div id="<%= dom_id(notification) %>" class="cpy-notification list-row text-base-content flex flex-col">
  <div class="list-col-wrap">
    <div class="text-xs uppercase font-semibold opacity-60"><%= notification.title %></div>
    <p class="list-col-wrap text-xs mt-1">
      <%= notification.content %>
    </p>
  </div>
  <div class="flex gap-3 items-baseline justify-end">
    <% if notification.external_link? %>
      <%= link_to "https://notifications.eigenfocus.com/#{notification.external_id}", target: "_blank", class: "cpy-external-link text-xs link-primary link-hover " do %>
        <%= t(".visit_link") %>
      <% end %>
    <% end %>

    <% unless notification.read? %>
      <%= button_to mark_as_read_notification_path(notification),
          class: "text-xs cpy-mark-as-read link link-primary link-hover",
          data: { turbo_method: :post } do %>
        <%= t(".mark_as_read") %>
      <% end %>
    <% end %>

  </div>

</div>
